<template>
  <div class="goodsInfo">
    <!-- 商品轮播 -->
    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-swipe :auto="4000">
              <mt-swipe-item v-for="item in lunbolist" :key="item.img_url">
                <img :src="item.img_url" alt="">
              </mt-swipe-item>
            </mt-swipe>
					</div>
				</div>
			</div>
    <!-- 商品购买 -->
      <div class="mui-card">
				<div class="mui-card-header">{{inform.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
              <span class="old">市场价：￥{{inform.old}}</span>
              <span class="new">销售价：￥{{inform.new}}</span>
            </p>
            <p class="num">
              购买数量：<numbox class="num1"></numbox>
            </p>
            <p>
              <mt-button type='primary' size='small'>立即购买</mt-button>
              <mt-button type='danger' size='small' class="red">加入购物车</mt-button>
            </p>
					</div>
				</div>
			</div>
    <!-- 商品详细 -->
      <div class="mui-card">
				<div class="mui-card-header">商品详情</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                <p>商品货号</p>
                <p>库存情况</p>
                <p>上架时间</p>
					</div>
				</div>
				<div class="mui-card-footer">
          <mt-button type='primary' size='large' plain>商品评论</mt-button>
          <mt-button type='danger' size='large' class="bottom" plain>商品详情</mt-button>
        </div>
			</div>
  </div>
</template>
<script>
import numbox from '../subcomponents/numbox.vue'
export default {
  data(){
    return{
      lunbolist: [],
      inform : []
    }
  },
  created(){
    this.getSwiper();
  },
  methods: {
    getSwiper(){
      this.lunbolist = JSON.parse(this.$route.params.message).img;
      this.inform = JSON.parse(this.$route.params.message);
      // this.lunbolist = this.$route.params.message;
    }
  },
  components:{
    numbox
  }
}
</script>
<style scoped>
  .mint-swipe{
    height: 300px;
 }
 .mint-swipe img{
   width: 100%;
 }
 .mui-card .mui-card-content .price .old{
   text-decoration: line-through;
 }
 .mui-card .mui-card-content .price .new{
   color: red;
   font-weight: bold;
   font-size: 16px;
   margin-left: 20px;
 }
 .mui-card .mui-card-content .num .num1{
   display: inline-block;
 }
 .mui-card .mui-card-content .red{
   margin-left: 20px;
 }
 .mui-card-footer{
   display: block;
 }
 .mui-card-footer .bottom{
   margin-top:10px;
 }
</style>


